import React from 'react'
import styles from './login.module.css'
import {createForm} from 'rc-form';
import {Toast} from 'antd-mobile'
import {connect} from "react-redux";
import {RouteComponentProps, withRouter} from 'react-router-dom';
import {Dispatch} from "redux";
import request from "../../utils/request";


interface Props extends RouteComponentProps {
    form: any,
    dispatch: Dispatch
}

class Index extends React.Component<Props> {

    login = () => {

        const {form: {validateFields}, dispatch, history} = this.props;
        validateFields((error: any, values: any) => {
            if (error) {
                return Toast.offline('用户名密码不能为空');
            }

            request('/auth/login',{
                method:'POST'
            }).then((result) => {
                const {authUser} = result.data;
                sessionStorage.setItem('token', authUser.token);
                history.push('/')
            }).catch(() => {
                Toast.fail('异步请求失败');
            });
        });

    };

    render() {
        const {form: {getFieldProps}} = this.props;

        return (
            <form className={styles.container}>
                <div className={styles.title}>登录</div>

                <div className={styles.inputGroup}>
                    <div style={{
                        display: 'inline-block',
                        position: 'relative',
                        width: '100%'
                    }}>
                        <i className={"iconfont icon-user"} style={{
                            position: 'absolute',
                            color: 'rgba(0,0,0,.25)',
                            top: '50%',
                            zIndex: 2,
                            transform: 'translateY(-50%)',
                            left: '6px',
                            fontSize: '18px'

                        }}/>
                        <input type="text" className={styles.input} placeholder={"账号"} {...getFieldProps('username', {
                            rules: [{required: true}],
                            initialValue: ''
                        })} />
                    </div>
                </div>


                <div className={styles.inputGroup}>
                    <div style={{
                        display: 'inline-block',
                        position: 'relative',
                        width: '100%'
                    }}>
                        <i className={"iconfont icon-lock"} style={{
                            position: 'absolute',
                            color: 'rgba(0,0,0,.25)',
                            top: '50%',
                            zIndex: 2,
                            transform: 'translateY(-50%)',
                            left: '6px',
                            fontSize: '18px'

                        }}/>
                        <input type="password" className={styles.input}
                               placeholder={"密码"} {...getFieldProps('password', {
                            rules: [{
                                required: true,
                                message: '密码不能为空'
                            }],
                            initialValue: ''
                        })}/>
                    </div>
                </div>

                <div className={styles.inputGroup}>
                    <button type={"button"} className={styles.loginBtn} onClick={this.login}>登录</button>
                </div>
            </form>
        );
    }
}


export default createForm()(connect(() => ({}), (dispatch: Dispatch) => ({
    dispatch
}))(withRouter(Index)))
